<template>
    <el-menu :default-active="this.$route.path" class="leftNav" :collapse="isCollapse">

        <div class="title" v-show="!isCollapse">
            <div>
                <div>房产ERP</div>
                <el-switch v-model="language" class="ml-2" inline-prompt
                    style="--el-switch-on-color: #37cbf0; --el-switch-off-color: #3f90db" :active-text="$t('text.language')"
                    :inactive-text="$t('text.language')" />
            </div>
            <div>
                <div>切换地图</div>
                <el-switch v-model="mapType" class="ml-2" inline-prompt
                    style="--el-switch-on-color: #37cbf0; --el-switch-off-color: #3f90db"
                    :active-text="$t('text.Common.l42')" :inactive-text="$t('text.Common.l43')" />
            </div>
        </div>


        <!--箭头-->
        <div class="row" @click="isCollapse = !isCollapse">
            <el-tooltip class="box-item" effect="light" :content="!isCollapse ? '收起' : '展开'" placement="left-start">
                {{ row }}
            </el-tooltip>
        </div>

        <!--搜素-->
        <div class="search" v-show="!isCollapse">
            <img class="searchImg1" :style="leftImg" src="../../assets/images/search.png" />
            <input class="leftSearch">
            <img class="searchImg2" :style="leftImg" src="../../assets/images/close.png" />
        </div>

        <!--第一个导航-->
        <el-menu-item index="/home" style="padding-left: 25px;" v-show="!isCollapse">
            <template #title><span @click="this.$router.push({ path: './home', replace: true })">{{
                $t('text.router.l1') }}</span></template>
        </el-menu-item>

        <!--第二个导航-->
        <el-sub-menu index="/manage" style="padding-left: 5px;" v-show="!isCollapse">
            <template #title>
                <el-menu-item index="/manage" class="myMenuItem" @click="navto('/manage')">{{
                    $t('text.router.l2') }}(6)</el-menu-item>
            </template>

            <el-menu-item index="/map" class="myMenuItem" style="padding-left: 55px;" @click="navto('/map')">{{
                $t('text.router.l3') }}</el-menu-item>

            <el-menu-item index="/newHouseRegistration" class="myMenuItem" style="padding-left: 55px;"
                @click="navto('/newHouseRegistration')">{{
                    $t('text.router.l25') }}</el-menu-item>
            <el-menu-item index="/add" class="myMenuItem" style="padding-left: 55px;" @click="navto('/add')">{{
                $t('text.router.l4') }}</el-menu-item>
            <el-menu-item index="/addNewHouse" class="myMenuItem" style="padding-left: 55px;"
                @click="navto('/addNewHouse')">{{
                    $t('text.router.l24') }}</el-menu-item>
            <el-menu-item index="/detail1" class="myMenuItem" style="padding-left: 55px;"
                @click="this.$router.push({ path: '/detail', query: { id: '1683394235239198721', index: 0 } })">{{
                    $t('text.router.l5') }}</el-menu-item>
            <el-menu-item index="/detail2" class="myMenuItem" style="padding-left: 55px;"
                @click="this.$router.push({ path: '/newHouseDetail', query: { id: '1', index: 2 } })">{{
                    $t('text.router.l23') }}</el-menu-item>

        </el-sub-menu>

        <el-sub-menu index="/customManage" style="padding-left: 5px;" v-show="!isCollapse">
            <template #title>
                <el-menu-item index="/customManage" class="myMenuItem" @click="navto('/customManage')">{{
                    $t('text.router.l6') }}(2)</el-menu-item>
            </template>
            <el-menu-item index="/addCustom" class="myMenuItem" style="padding-left: 55px;" @click="navto('/addCustom')">{{
                $t('text.router.l7') }}</el-menu-item>
            <el-menu-item index="/customDetail" class="myMenuItem" style="padding-left: 55px;"
                @click="this.$router.push({ path: '/customDetail', query: { id: '1', index: 1 } })">{{
                    $t('text.router.l8') }}</el-menu-item>
        </el-sub-menu>

        <el-sub-menu index="/realEstate" style="padding-left: 5px;" v-show="!isCollapse">
            <template #title>
                <el-menu-item index="/realEstate" class="myMenuItem" @click="navto('/realEstate')">{{
                    $t('text.router.l11') }}(3)</el-menu-item>
            </template>
            <el-menu-item index="/regionManage" class="myMenuItem" style="padding-left: 55px;"
                @click="navto('/regionManage')">{{ $t('text.router.l10') }}</el-menu-item>
            <el-menu-item index="/addNeighbourhoods" class="myMenuItem" style="padding-left: 55px;"
                @click="navto('/addNeighbourhoods')">{{ $t('text.router.l12') }}</el-menu-item>
            <el-menu-item index="/neighbourhoodsDetail" class="myMenuItem" style="padding-left: 55px;"
                @click="this.$router.push({ path: '/neighbourhoodsDetail', query: { id: '1682277300137017346' } })">{{
                    $t('text.router.l13') }}</el-menu-item>
        </el-sub-menu>

        <el-sub-menu index="/personnelManage" style="padding-left: 5px;" v-show="!isCollapse">

            <template #title>
                <el-menu-item index="/personnelManage" class="myMenuItem" @click="navto('/personnelManage')">{{
                    $t('text.router.l14') }}(7)</el-menu-item>
            </template>

            <el-menu-item index="/department" class="myMenuItem" style="padding-left: 55px;"
                @click="navto('/department')">{{ $t('text.router.l15') }}</el-menu-item>

            <el-sub-menu index="/employeeManage" style="padding-left: 15px;" v-show="!isCollapse">
                <template #title>
                    <el-menu-item index="/employeeManage" class="myMenuItem" @click="navto('/employeeManage')"
                        style="padding-left: 0px;">{{ $t('text.router.l16') }}(2)</el-menu-item>
                </template>
                <el-menu-item index="/addEmployees" class="myMenuItem" style="padding-left: 55px;"
                    @click="navto('/addEmployees')">{{ $t('text.router.l17') }}</el-menu-item>
                <el-menu-item index="/employeeDetails" class="myMenuItem" style="padding-left: 55px;"
                    @click="this.$router.push({ path: '/employeeDetails', query: { id: '1690248837225926657' } })">{{
                        $t('text.router.l18') }}</el-menu-item>
            </el-sub-menu>

            <el-menu-item index="/employeeDynamics" class="myMenuItem" style="padding-left: 55px;"
                @click="navto('/employeeDynamics')">{{ $t('text.router.l19') }}</el-menu-item>

            <el-menu-item index="/employeeCare" class="myMenuItem" style="padding-left: 55px;"
                @click="navto('/employeeCare')">{{ $t('text.router.l20') }}</el-menu-item>

            <el-menu-item index="/loginLog" class="myMenuItem" style="padding-left: 55px;" @click="navto('/loginLog')">{{
                $t('text.router.l21') }}</el-menu-item>

        </el-sub-menu>

        <el-menu-item index="/systemSetting" style="padding-left: 25px;" v-show="!isCollapse">
            <template #title><span @click="this.$router.push({ path: './systemSetting', replace: true })">{{
                $t('text.router.l22') }}</span></template>
        </el-menu-item>

    </el-menu>
</template>
    
<script>
export default {
    name: 'LeftNavigation',
    components: {
    },
    data() {
        return {
            isCollapse: localStorage.getItem('isCollapse') == null ? false : String(localStorage.getItem('isCollapse')) == 'false' ? false : true,
            row: "<",
            leftImg: {},
            language: this.$i18n.locale == 'zh' ? true : false,
            mapType: localStorage.getItem("mapType") == 'mapkit' ? false : true
        }
    },
    mounted() {
    },
    methods: {
        navto(path) {
            this.$router.push(path)
        }
    },
    watch: {
        isCollapse: {
            handler() {
                if (this.isCollapse) {
                    this.row = ">"
                    this.leftImg = { display: 'none' }
                } else {
                    this.row = "<"
                    this.leftImg = {}
                }
                localStorage.setItem('isCollapse', this.isCollapse)
            }
        },
        language: {
            handler(newValue) {
                if (newValue) {
                    this.$i18n.locale = 'zh'
                    localStorage.setItem('language', this.$i18n.locale)
                    this.$router.go(0)
                } else {
                    this.$i18n.locale = 'en'
                    localStorage.setItem('language', this.$i18n.locale)
                    this.$router.go(0)
                }
            }
        },
        mapType: {
            handler(newValue) {
                if (newValue) {
                    localStorage.setItem('mapType', 'amap')
                    this.$router.go(0)
                } else {
                    localStorage.setItem('mapType', 'mapkit')
                    this.$router.go(0)
                }
            }
        }
    },
    computed: {

    }

}
</script>
    
<style scoped>
.leftNav:not(.el-menu--collapse) {
    width: 290px;
    min-height: 100%;
}

.leftNav {
    width: 10px;
    z-index: 99;
}

.title {
    display: flex;
    text-align: left;
    font-size: 12px;
    color: lightgray;
    font-weight: 800;
    padding-left: 10px;
    padding-top: 30px;
    padding-bottom: 10px;
    justify-content: space-around;
}

.row {
    position: absolute;
    right: -12px;
    font-size: 25px;
    color: #0dc1fe;
    top: 50%;
    width: 25px;
    z-index: 1;
}

.search {
    display: flex;
    margin-left: 10px;
    margin-right: 15px;
    align-items: center;
    margin-top: 5px;
    margin-bottom: 5px;
}

.leftSearch:focus {
    border-bottom: 1px solid #99e2ff;
}

.leftSearch {
    border: none;
    outline: none;
    width: 100%;
    height: 55px;
    border-bottom: 1px solid #ccc;
    padding-left: 23px;
    padding-right: 23px;
}

.searchImg1 {
    position: absolute;
    left: 10px;
    width: 20px;
    height: 20px;
}

.searchImg2 {
    position: absolute;
    right: 20px;
    width: 20px;
    height: 20px;
}

::v-deep(.el-sub-menu .el-sub-menu__icon-arrow) {
    left: 20px;
    right: auto;
}


::v-deep(.el-sub-menu__title),
::v-deep(.el-sub-menu .el-menu-item) {
    height: 40px;
    line-height: 40px;
}

::v-deep(.el-icon svg) {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
}

::v-deep(.el-menu--collapse) {
    width: 10px !important;
}
</style>